<template>
  <div class="propupBox">
    <!-- 搜索框 -->
    <van-search
      v-model="inputVal"
      @search="onSearch"
      @cancel="onCancel"
      @input="onInput"
      show-action
      :placeholder="iptPlaceholder"
    />
    <!-- 历史区块 -->
    <HistoryHot
      v-if="blockShow===1"
      :historyKeywordList="historyKeywordList"
      :hotKeywordList="hotKeywordList"
      @changeTag="changeTag"
    ></HistoryHot>
    <!-- list区块 -->
    <MyList @cellClick="changeTag" v-else-if="blockShow===2" :arr="listArr"></MyList>
    <!-- 产品区块 -->
    <MyProduct
      @changeCategoryVal="changeCategoryVal"
      @changePriceVal="changePriceVal"
      :filterCategory="filterCategory"
      :goodsList="goodsList"
      v-else
    ></MyProduct>
  </div>
</template>

<script>
import HistoryHot from '../components/HistoryHot'
import MyProduct from '../components/MyProduct'
import MyList from '../components/MyList'
import { GetPropData, GetSearchData, GetTimeData } from '@/api/search'
// 引入防抖组件
import { debounce } from '../utils/common'
export default {
  components: {
    HistoryHot,
    MyProduct,
    MyList
  },
  data () {
    return {
      inputVal: '',
      iptPlaceholder: '',
      // 1代表历史记录与热门搜索的显示
      // 2代表列表区块
      // 3代表产品区块
      blockShow: 1,
      // 历史区块数组
      historyKeywordList: [],
      // 热门搜索的数组
      hotKeywordList: [],
      // 传递MyProduct分类数据
      filterCategory: [],
      // 传递MyProduct商品列表数据
      goodsList: [],
      // 价格排序
      order: 'desc',
      // 分类id
      categoryId: 0,
      // 排序方式 id默认排序 price价格排序
      sort: 'id',
      // myList组件数组
      listArr: []
    }
  },
  methods: {
    async getPropData () {
      const res = await GetPropData()
      if (res.errno === 0) {
        const { defaultKeyword, historyKeywordList, hotKeywordList } = res.data
        this.iptPlaceholder = defaultKeyword.keyword
        this.historyKeywordList = historyKeywordList
        this.hotKeywordList = hotKeywordList
      }
    },
    // 搜索事件
    async onSearch () {
      // 搜索请求
      const res = await GetSearchData({
        keyword: this.inputVal,
        page: 1,
        size: 20,
        // 价格排序
        order: this.order,
        // 分类id
        categoryId: this.categoryId,
        sort: this.sort
      })
      if (res.errno === 0) {
        // 成功跳转到产品区块
        this.blockShow = 3
        // 结构数据对象
        const { filterCategory, goodsList } = res.data
        // 修改数组中的某个对象的字段  深拷贝
        const arr = JSON.parse(JSON.stringify(filterCategory).replace(/name/g, 'text').replace(/id/g, 'value'))
        this.filterCategory = arr
        this.goodsList = goodsList
      }
    },
    // 触发分类数据
    changeCategoryVal (val) {
      this.categoryId = val
      this.onSearch()
    },
    // 价格高低顺序
    changePriceVal (val) {
      console.log(val)
      this.order = val
      // 排序以价格排序
      this.sort = 'price'
      this.onSearch()
    },
    // 取消事件
    onCancel () {
      this.$router.go(-1)
    },
    // 实时搜索
    onInput: debounce(async function () {
      // 显示列表区块
      this.blockShow = 2
      const res = await GetTimeData({
        keyword: this.inputVal
      })
      if (res.errno === 0) {
        this.listArr = res.data
      }
    }, 200),
    // 历史区块标签点击搜索数据
    changeTag (val) {
      console.log(val)
      this.inputVal = val
      this.onSearch()
      // this.blockShow
    }
  },
  created () {
    if (this.$route.query.name) {
      console.log(this.$route.query.name)
      this.inputVal = this.$route.query.name.trim()
      this.onSearch()
    }
    this.getPropData()
  }
}
</script>

<style lang="less" scoped>
.propupBox {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background-color: #efefef;
}
</style>
